<template>
  <div class="outer">
    <p>{{ typedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['下雪了，张万森', '下雪了，林北星'],
      currentIndex: 0,
      typedText: ''
    }
  },
  mounted() {
    this.init()
    // 开始打字效果
    // this.typeWriter(0)
  },
  methods: {
    async init() {
      const str = this.texts[0]
      for (let i = 0; i < str.length + 1; i++) {
        await new Promise(resolve => setTimeout(() => {
          this.typedText += str.charAt(i)
          resolve()
        }, i * 50))
      }
      this.typedText = ''
      const str1 = this.texts[1]
      for (let i = 0; i < str1.length + 1; i++) {
        await new Promise(resolve => setTimeout(() => {
          this.typedText += str1.charAt(i)
          resolve()
        }, i * 50))
      }
      this.$emit('change', true)
    },
    typeWriter(index) {
      const currentText = this.texts[this.currentIndex]
      if (index < currentText.length) {
        this.typedText += currentText.charAt(index)
        setTimeout(() => this.typeWriter(index + 1), 1000)
      } else {
        setTimeout(() => this.deleteText(currentText.indexOf('张万森')), 1000)
      }
    },
    deleteText(index) {
      const currentText = this.texts[this.currentIndex]
      if (index >= 0) {
        this.typedText = currentText.substring(0, 4)
        setTimeout(() => this.deleteText(index - 1), 50)
      } else {
        // 切换到下一个文本
        this.currentIndex++
        if (this.currentIndex < this.texts.length) {
          setTimeout(() => this.typeWriter(0), 1000)
          setTimeout(() => {
            this.$emit('change', true)
          }, 2000)
        }
      }
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
p {
  margin-top: 8vh;
  font-size: 30px;
  color:white
}
.outer{

}
</style>
